<template>
    <div class="container" @keyup.enter="login()">
        <div class="login">
            <div class="row">
                <h1 class="title">登录</h1>
            </div>
            <div class="row">
                <span>账号:</span>
                <el-input v-model="user.username" placeholder="请输入账号" ref="username"></el-input>
            </div>
            <div class="row">
                <span>密码:</span>
                <el-input placeholder="请输入密码" v-model="user.password" show-password ref="password"></el-input>
            </div>
            <div class="bottom">
                <div>
                    <router-link :to="{ name: 'Register' }">注册</router-link>
                </div>
                <div>
                    <router-link to="">忘记密码？</router-link>
                </div>
            </div>
            <div class="row">
                <el-button class="button" type="primary" @click="login()" >点我登录</el-button>
            </div>
        </div>
    </div>
</template>  
  
<script>
import { Message } from 'element-ui';
import instance from '../utils/request'
export default {
    name: 'Login',
    data() {
        return {
            user: {
                username: null,
                password: null,
            }
        }
    },
    methods: {

        login() {
            if (this.user.username == null || (this.user.username).trim() == '') {
                Message.warning('用户名不能为空');
                this.$refs.username.focus();
                return;
            }

            if (this.user.password == null || (this.user.password) == '') {
                Message.warning('密码不能为空');
                this.$refs.username.focus();
                return;
            }

            instance.post('/user/login', this.user).then(success => {
                if (success.data.code == 10000) { //这里根据后端定义状态码(1000 表示 "操作成功")
                    //登录成功
                    //1.将 Token 保存到 localStorage 中
                    const token = success.data.data;
                    localStorage.setItem("token", token);
                    //2.将用户登录信息状态通过 vux 和 localStorage 进行保存
                    this.$store.commit("login", success.data.data);
                    //3.提示跳转
                    Message.success("登录成功，为您跳转到主页~");
                    window.location.href="/index"
                } else {
                    //登录失败
                    console.log(success.data.msg);//从后端得到失败的信息(前端在控制台看即可)
                    Message.error("账号或密码错误，请重试！");
                }
            }).catch(error => {
                Message.error("服务器异常，请稍后重试！");
                console.log(error);
            });
        }
    }

};  
</script>

<style scoped>
.bottom {
    margin: 20px 0;
    display: flex;
    justify-content: space-around;
    letter-spacing: 2px;
}

.container {
    margin: 0 50px;
    width: calc(100% - 100px);
    height: calc(100% - 60px);
}

.login {
    width: 500px;
    height: 400px;
    margin: 100px auto;
    padding: 50px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.login .row {
    width: 350px;
    height: 60px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.title {
    padding-bottom: 40px;
}

.row span {
    display: block;
    width: 100px;
}

.row .button {
    margin-top: 20px;
    width: 300px;
    height: 50px;
}
</style>